<template>
	<map id="map" style="width: 100vw; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="markers"
		show-location @tap="tap" @markertap="markertap">
	</map>
	<!-- 导航栏 -->
	<cover-view class="navbar" :style="`height: ${navbarHeight}`">
		<cover-image class="bg" src="../../static/index/home_bg01.png"></cover-image>
		<cover-image class="avatar"
			src="https://c-ssl.dtstatic.com/uploads/blog/202206/26/20220626195023_f1e25.thumb.1000_0.jpeg"></cover-image>
		<cover-image class="cy" src="../../static/index/home_logo.png"></cover-image>
	</cover-view>
	<!-- 中心点 -->
	<cover-view class="centre">
		<cover-image class="icon" src="../../static/index/home_icon03.png"></cover-image>
	</cover-view>
	<!-- 主菜单 -->
	<cover-view class="bottom_container" v-if="!isShowDotIntro">
		<cover-image class="bg" src="../../static/index/home_bg02.png"></cover-image>
		<cover-view class="fjwd">
			<cover-image @click="skip('/pages/dotList/dotList')" class="icon" src="../../static/index/home_but04.png"></cover-image>
			<cover-view @click="skip('/pages/dotList/dotList')" class="describe">附近网点</cover-view>
		</cover-view>
		<cover-view class="btn">
			<cover-image class="bg" src="../../static/index/home_but01.png"></cover-image>
			<cover-image @click="scanCode()" class="code" src="../../static/index/home_but05.png"></cover-image>
			<cover-view @click="scanCode()" class="describe">扫码充吖</cover-view>
		</cover-view>
		<cover-view class="grzx">
			<cover-image  @click="skip('/pages/individualCenter/individualCenter')" class="icon" src="../../static/index/home_but03.png"></cover-image>
			<cover-view @click="skip('/pages/individualCenter/individualCenter')" class="describe">个人中心</cover-view>
		</cover-view>
	</cover-view>
	<!-- 网点简介 -->
	<cover-view class="dotIntro" v-if="isShowDotIntro">
		<cover-image class="bg" src="../../static/dotIntro/outlets_bg01.png"></cover-image>
		<cover-view class="container">
			<cover-view class="top_c">
				<cover-view class="dotIntro_img">
					<cover-image src="../../static/dotIntro/outlets_ton.png"></cover-image>
				</cover-view>
				<cover-view class="dotIntro_texts">
					<cover-view class="dotIntro_texts1 u-line-1">莲花山公园2号站台</cover-view>
					<cover-view class="dotIntro_texts_zh">
						<cover-image class="dotIntro_texts_zh_icon1" src="../../static/dotIntro/outlets_icon02.png"></cover-image>
						<cover-view class="dotIntro_texts_zh_text">周一至周日 00:00-00:00</cover-view>
					</cover-view>
					<cover-view class="dotIntro_texts_zh">
						<cover-image class="dotIntro_texts_zh_icon2" src="../../static/dotIntro/outlets_icon01.png"></cover-image>
						<cover-view class="dotIntro_texts_zh_text u-line-1">新洲路5010莲花山公园2号站台</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="top_c_right">
					<cover-view class="jh">
						<cover-image class="bg" src="../../static/dotIntro/outlets_but01.png"></cover-image>
						<cover-view class="con" @click="scanCode()">
							<cover-image class="con_img" src="../../static/index/home_but05.png"></cover-image>
							<cover-view class="con_t">借还</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="dh" @click="handleMapLocation()">
						<cover-image class="dh_img" src="../../static/dotIntro/outlets_but04.png"></cover-image>
						<cover-view>导航</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="line"></cover-view>
			<cover-view class="bot_c">
				<cover-view class="bot_c_item">
					<cover-image class="apple" src="../../static/dotIntro/outlets_icon03.png"></cover-image>
					<cover-view>有</cover-view>
				</cover-view>
				<cover-view class="bot_c_item">
					<cover-image class="android" src="../../static/dotIntro/outlets_icon04.png"></cover-image>
					<cover-view>有</cover-view>
				</cover-view>
				<cover-view class="bot_c_item">
					<cover-image class="type-c" src="../../static/dotIntro/outlets_icon05.png"></cover-image>
					<cover-view>有</cover-view>
				</cover-view>
				<cover-view class="bot_c_item">
					<cover-image class="yes" src="../../static/dotIntro/outlets_icon06.png"></cover-image>
					<cover-view>可归还 卡槽充足</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
	<!-- 左侧功能栏 -->
	<cover-view class="left-btns">
		<cover-view class="small-btn">
			<cover-image class="bg" src="../../static/index/home_but02.png"></cover-image>
			<cover-image @click="search()" class="small-btn_icon" src="../../static/index/home_but06.png"></cover-image>
		</cover-view>
		<cover-view class="small-btn">
			<cover-image class="bg" src="../../static/index/home_but02.png"></cover-image>
			<cover-image @click="moveToLocation()" class="small-btn_icon" src="../../static/index/home_but06-1.png"></cover-image>
		</cover-view>
		<cover-view class="small-btn">
			<cover-image class="bg" src="../../static/index/home_but02.png"></cover-image>
			<cover-image @click="skip('/pages/helpCenter/helpCenter')" class="small-btn_icon" src="../../static/index/home_but07.png"></cover-image>
		</cover-view>
	</cover-view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	import {
		onLoad,
		onShow,
		onReady
	} from "@dcloudio/uni-app"
	const {
		proxy
	} = getCurrentInstance();
	import sign1 from "@/static/index/home_icon01.png"
	import sign2 from "@/static/index/home_icon02.png"

	// 状态栏高度
	let navbarHeight = ref(0)
	async function setNavbarHeight() {
		let res = await uni.getSystemInfo();
		navbarHeight.value = res.statusBarHeight + 54 + "px"
	}
	setNavbarHeight()

	onReady(() => {
		mapContext.value = uni.createMapContext("map", proxy);
		moveToLocation()
	})

	// map上下文对象
	let mapContext = ref(null)
	// 纬度
	let latitude = ref(39.909)
	// 经度
	let longitude = ref(116.39742)
	// 标记点
	let markers = reactive([{
			id: 1,
			latitude: 22.536,
			longitude: 113.956,
			iconPath: sign1,
			width: 33,
			height: 38,
			callout: {
				content: '999m',
				color: '#fff',
				fontSize: '22rpx',
				borderRadius: '10rpx',
				bgColor: 'rgba(0,0,0,0.8)',
				padding: '8rpx',
				textAlign: 'center',
				display: 'BYCLICK'
			}
		},
		{
			id: 2,
			latitude: 22.541,
			longitude: 113.956,
			iconPath: sign1,
			width: 33,
			height: 38,
			callout: {
				content: '999m',
				color: '#fff',
				fontSize: '22rpx',
				borderRadius: '10rpx',
				bgColor: 'rgba(0,0,0,0.8)',
				padding: '8rpx',
				textAlign: 'center',
				display: 'BYCLICK'
			}
		}
	])

	// 是否显示点位简介
	let isShowDotIntro = ref(false)

	// 获取当前的地理位置并更新map经纬度
	function getLocation() {
		uni.getLocation({
			type: 'gcj02',
			success: function(res) {
				latitude.value = res.latitude;
				longitude.value = res.longitude;
			}
		});
	}

	// 搜索
	function search() {
		uni.chooseLocation({
			success: function(res) {
				console.log('位置名称：' + res.name);
				console.log('详细地址：' + res.address);
				console.log('纬度：' + res.latitude);
				console.log('经度：' + res.longitude);
			}
		});
	}

	// 将地图中心移动到当前定位点
	function moveToLocation() {
		mapContext.value.moveToLocation()
	}

	
	// 点击map
	function tap(e) {
		isShowDotIntro.value = false
		// 判断是否存在点击状态的标记点
		const markaerClicked = markers.find(x => x.callout.display === "ALWAYS");
		if (markaerClicked) {
			updateMarker(markaerClicked, sign1, 'BYCLICK');
		}
	}
	
	// 点击标记点
	function markertap(e) {
		setTimeout(() => {
			const marker = markers.find(item => item.id === e.markerId);
			if (marker.callout.display === "BYCLICK") {
				// 判断是否存在点击状态的标记点
				const markaerClicked = markers.find(x => x.callout.display === "ALWAYS");
				if (markaerClicked) {
					updateMarker(markaerClicked, sign1, 'BYCLICK');
				}
				updateMarker(marker, sign2, 'ALWAYS');
				isShowDotIntro.value = true
			}
		},100)
	}

	function updateMarker(marker, iconPath, display) {
		marker.iconPath = iconPath;
		marker.callout.display = display;
	}

	// 扫码
	function scanCode() {
		uni.scanCode({
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
			}
		});
	}

	// 导航
	function handleMapLocation() {
		uni.openLocation({
			latitude: 22.536,
			longitude: 113.956,
		})
	}


	function skip(url) {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
	cover-view {
		background: transparent;
	}
	
	.navbar {
		width: 100%;
		position: fixed;
		top: 0;

		.bg {
			width: 100%;
			height: 100%;
		}

		.avatar {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			bottom: 30rpx;
			left: 30rpx;
			/* #ifdef MP-ALIPAY */
			left: 80rpx;
			/* #endif */
			border-radius: 50%;
		}

		.cy {
			width: 72rpx;
			height: 34rpx;
			position: absolute;
			left: calc(50% - 36rpx);
			bottom: 40rpx;
		}
	}

	.centre {
		position: fixed;
		top: 47%;
		left: 50%;
		transform: translateX(-50%);


		.icon {
			width: 28rpx;
			height: 48rpx;
		}
	}

	.bottom_container {
		width: 719rpx;
		height: 186rpx;
		position: fixed;
		left: calc(50% - 359.5rpx);
		bottom: 40rpx;

		.bg {
			width: 100%;
			height: 100%;
		}

		.fjwd {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 58rpx;
			left: 50rpx;

			.icon {
				width: 36rpx;
				height: 45rpx;
			}

			.describe {
				color: #0c0b0b;
				letter-spacing: 1px;
				font-size: 10px;
				margin-top: 8rpx;
			}
		}

		.btn {
			width: 436rpx;
			height: 148rpx;
			position: absolute;
			top: 31rpx;
			left: 152rpx;

			.bg {
				width: 100%;
				height: 100%;
			}

			.describe {
				font-size: 24px;
				color: white;
				position: absolute;
				top: 31rpx;
				left: 155rpx;
			}

			.code {
				width: 46rpx;
				height: 46rpx;
				position: absolute;
				top: 38rpx;
				left: 90rpx;
			}
		}

		.grzx {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 61rpx;
			right: 42rpx;

			.icon {
				width: 36rpx;
				height: 36rpx;
			}

			.describe {
				color: #0c0b0b;
				letter-spacing: 1px;
				font-size: 10px;
				margin-top: 8rpx;
			}
		}
	}

	.left-btns {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		left: 9rpx;
		bottom: 23.46%;

		.small-btn {
			width: 98rpx;
			height: 99rpx;
			position: relative;
			
			.bg {
				width: 100%;
				height: 100%;
			}

			.small-btn_icon {
				width: 38rpx;
				height: 38rpx;
				position: absolute;
				top: 30rpx;
				left: calc(50% - 19rpx);
			}
		}
	}

	.dotIntro {
		width: 723rpx;
		height: 290rpx;
		position: fixed;
		left: calc(50% - 361.5rpx);
		bottom: 40rpx;

		.bg {
			width: 100%;
			height: 100%;
		}

		.container {
			width: 100%;
			height: 100%;
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			padding: 28rpx;

			.top_c {
				width: 100%;
				display: flex;
				align-items: center;

				.dotIntro_img {
					width: 170rpx;
					height: 170rpx;

					cover-image {
						width: 100%;
						height: 100%;
					}
				}

				.dotIntro_texts {
					width: 320rpx;
					display: flex;
					flex-direction: column;
					margin-left: 25rpx;

					.dotIntro_texts1 {
						font-size: 28rpx;
						letter-spacing: 1px;
						color: #0c0b0b;
						font-weight: bold;
					}

					.dotIntro_texts_zh {
						display: flex;
						align-items: center;
						margin-top: 28rpx;

						.dotIntro_texts_zh_icon1 {
							width: 20rpx;
							height: 20rpx;
							margin-right: 4rpx;
						}

						.dotIntro_texts_zh_icon2 {
							width: 16rpx;
							height: 21rpx;
							margin-right: 6rpx;
							flex-shrink: 0;
						}

						.dotIntro_texts_zh_text {
							font-size: 22rpx;
							letter-spacing: 1px;
							color: #333333;
						}
					}
				}

				.top_c_right {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-left: auto;

					.jh {
						width: 128rpx;
						height: 128rpx;
						position: relative;

						.bg {
							width: 100%;
							height: 100%;
						}

						.con {
							width: 100%;
							height: 100%;
							position: absolute;
							inset: 0;
							display: flex;
							flex-direction: column;
							align-items: center;

							.con_img {
								width: 42rpx;
								height: 42rpx;
								margin-top: 20rpx;
							}

							.con_t {
								font-size: 12px;
								color: #fff;
								letter-spacing: 1px;
								margin-top: 4rpx;
							}
						}
					}

					.dh {
						width: 106rpx;
						height: 42rpx;
						background-color: #606060;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						letter-spacing: 1px;
						color: #ffffff;
						font-size: 12px;

						.dh_img {
							width: 18rpx;
							height: 20rpx;
							margin-right: 5rpx;
						}
					}
				}
			}

			.line {
				width: 672rpx;
				height: 1rpx;
				background-color: #cbcbcb;
				margin-top: 18rpx;
			}

			.bot_c {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				justify-content: space-around;

				.bot_c_item {
					display: flex;
					align-items: center;
					letter-spacing: 1px;
					color: #000000;
					font-size: 10px;

					.apple {
						width: 22rpx;
						height: 27rpx;
						margin-right: 5rpx;
					}

					.android {
						width: 22rpx;
						height: 25rpx;
						margin-right: 5rpx;
					}

					.type-c {
						width: 22rpx;
						height: 23rpx;
						margin-right: 5rpx;
					}

					.yes {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>